<!-- 选择参数 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="search-box flex" ref="tabBarSearch">
			<view class="input-product m-b-40">
			  <u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="params.data.keywords" @change="onSearchChange" :showAction="false"></u-search>
			</view>
		</view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
		             @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
		             :style="{height: `${screenHeight}px`, backgroundColor: '#fff'}">
		
		  <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
		    <u-empty mode="list" text="暂无数据">
				<u-button class="empty-button" text="新增参数" type="primary" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="clickBtn({key: 'btn1'})"></u-button>
				<view class="tip-view">
					可点击右上角：+进行快速建档案
				</view>
			</u-empty>
		  </view>
		
		  <u-cell  v-for="item in listData" :key="item.id" :title="item.name" @click="itemProductClick(item)">
		    <view slot="icon" class="list-item-avatar">
		      <u-avatar
		          fontSize="18"
		          randomBgColor
		          :text="item.name[item.name.length - 1]"
		      ></u-avatar>
		    </view>
		    <view slot="right-icon" class="list-item-text">
		      <text class="label">累次</text>
		      <text class="amount" :class="{'is-green': item.amountDeb > 0}">{{ item.amountDebt }}</text>
		    </view>
		  </u-cell>
		</scroll-view>
		<!-- 弹框 新增 -->
		<u-popup :show="show" :round="10" :closeOnClickOverlay="false" mode="center">
			<view class="popup-view">
				<view class="title">
					新增参数
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="value flex">
							<u--input
							    border="surround"
								shape="circle"
							    v-model="params.data.a"
							  ></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onSave">
						保存
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
	  listPage
	} from '@/apis/inventory/converter'
	export default {
		name: "",
		data() {
			return {
				config: {
				  title: "选择参数",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe727;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				// 列表数据
				pageLoading: false,
				triggered: false,
				screenHeight: 0,
				listData: [],
				// 参数
				params: {
					data: {
						keywords: ''
					},
					page: {
						current: 1,
						size: 10
					}
				},
			}
		},
		methods: {
			// 打开侧边栏
			clickBtn(item) {
			  if (item.key === "btn1") {
			    this.show = true
			  }
			},
			// 搜索
			onSearchChange() {
				
			},
			// 获取列表数据
			getListPage() {
			  uni.showLoading({
			    title: "加载中"
			  })
			  listPage(this.params).then(res => {
			    if (!res.data.flag) return
			    const records = res.data.data.records || []
			    this.listData.push(...records)
			  }).finally(_ => {
			    this.triggered = false
			    this.pageLoading = false
			    uni.hideLoading()
			  })
			},
			// 下拉刷新
			onRefresherrefresh() {
			  this.triggered = true
			  this.listData = []
			  this.listPage()
			},
			// 滚动加载
			onScrolltolower() {},
			// 选择当前条数据
			itemProductClick(val) {
			  // uni.navigateTo({
			  //   url: `pages/application/pages/cloth/customer-product/index?id=${id}`
			  // })
			},
			// 取消
			onCencal() {
				this.show = false
				// 参数重置
			},
			// 保存
			onSave() {
				this.onCencal()
			}
		},
		mounted() {
			const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.tabBarSearch.$el.offsetHeight);
			const sysInfo = uni.getSystemInfoSync()
			this.screenHeight = sysInfo.windowHeight - height
			this.getListPage()
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding-top: 30rpx;
		justify-content: center;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
	.input-product {
	  width: 95%;
	  border-radius: 50upx;
	  height: 70upx;
	  line-height: 70upx;
	  color: #fff;
	  display: flex;
	  background: rgba(248, 248, 248, 0.34);
	}
	.empty-button {
		width: 660rpx;
		margin-top: 20rpx;
	}
	.tip-view {
		text-align: center;
		font-size: 24rpx;
		color: #bbb;
		padding-top: 20rpx;
	}
</style>